/*
 *@description: 家政项目详情页面
 *@Author:@reynold
 *@Date:2025-03-25 17:38:56
 *@Update:2025-03-25 17:38:56
 *@Version: V1.0.0
*/
<template>
  <div class="detail_box">
    <van-nav-bar  title="服务详情"  left-text="返回"  left-arrow  @click-left="$router.go(-1)"/>
    
    <div class="swiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item @click="toSwipeItem(image)" v-for="image in images" :key="image.id">
            <img v-lazy="image.src" height="200px" width="100%" />
          </van-swipe-item>
        </van-swipe>
      </div>
    
    <div class="detail-content">
      <h2 class="detail-title">{{ detailData.title }}</h2>
      <p class="detail-desc">{{ detailData.desc }}</p>
      
      <div class="service-features">
        <h3>服务特点</h3>
        <van-cell icon="checked" title="专业团队" />
        <van-cell icon="checked" title="环保材料" />
        <van-cell icon="checked" title="满意保障" />
      </div>
      
      <div class="service-process">
        <h3>服务流程</h3>
        <van-steps direction="vertical" :active="0">
          <van-step>
            <h4>预约服务</h4>
            <p>选择服务时间和项目</p>
          </van-step>
          <van-step>
            <h4>确认订单</h4>
            <p>客服确认服务细节</p>
          </van-step>
          <van-step>
            <h4>上门服务</h4>
            <p>专业人员按时上门</p>
          </van-step>
          <van-step>
            <h4>完成验收</h4>
            <p>确认服务满意后付款</p>
          </van-step>
        </van-steps>
      </div>
      <van-button   type="primary"   block  @click="handleBook"  class="book-btn">立即预约</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      images: [
        {
          id: 1,
          src: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.oakBKpATED1I0N30NS5YZQHaHa?w=193&h=194&c=7&r=0&o=5&dpr=1.5&pid=1.7',
          path: '/detail'
        },
        {
          id: 2,
          src: "https://tse1-mm.cn.bing.net/th/id/OIP-C.fjSTLhgQjthf_f0YrIRmnQAAAA?w=281&h=204&c=7&r=0&o=5&dpr=1.5&pid=1.7",
          path: '/detail'
        },
        {
          id: 3,
          src: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.KblszL6d4V0Zowip7t86UQHaHh?w=210&h=213&c=7&r=0&o=5&dpr=1.5&pid=1.7',
          path: '/detail'
        }
      ],
    }
  },
  created() {
    this.detailData = {
      id: this.$route.query.id,
      title: this.$route.query.title,
      desc: this.$route.query.desc,
      img: this.$route.query.img
    }
  },
  methods: {
    handleBook() {
      this.$router.push({
        query: {
          serviceName: this.detailData.title
        }
      });
    }
  }
}
</script>

<style scoped>
.swipe-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.detail-banner {
  height: 250px;
  overflow: hidden;
}

.detail-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-content {
  padding: 15px;
}

.detail-title {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}

.detail-desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.service-features,
.service-process {
  margin: 25px 0;
}

h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  padding-left: 10px;
  border-left: 4px solid #ff5f6d;
}

.book-btn {
  margin: 30px 0;
}
</style>